<template>
  <div class="dashboard-container">
    <!-- 数据统计 -->
    <el-row :gutter="10" class="mt-5">
      <!-- 访客数(UV) -->
      <el-col :span="6">
        <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
          <template #template>
            <el-card>
              <template #header>
                <div>
                  <el-skeleton-item variant="h3" style="width: 40%" />
                  <el-skeleton-item variant="rect" style="float: right; width: 1em; height: 1em" />
                </div>
              </template>

              <div class="flex-x-between">
                <el-skeleton-item variant="text" style="width: 30%" />
                <el-skeleton-item variant="circle" style="width: 2em; height: 2em" />
              </div>
              <div class="mt-5 flex-x-between">
                <el-skeleton-item variant="text" style="width: 50%" />
                <el-skeleton-item variant="text" style="width: 1em" />
              </div>
            </el-card>
          </template>
          <template v-if="!visitStatsLoading">
            <el-card shadow="never">
              <template #header>
                <div class="flex-x-between">
                  <span class="text-gray">保险产品数</span>
                </div>
              </template>

              <div class="flex-x-between mt-2">
                <div class="flex-y-center">
                  <span class="text-lg">{{ productCount }}</span>
                  <!-- <span class="text-lg">{{ visitStatsData.todayUvCount }}</span> -->
                </div>
                <el-icon>
                  <Open />
                </el-icon>

              </div>

              <!--              <div class="flex-x-between mt-2 text-sm text-gray">-->
              <!--                <span>累计保险产品销量</span>-->
              <!--                <span><CountTo :startVal="0" :endVal="2024824" :decimals="0" :duration="3000"></CountTo></span>-->
              <!--              </div>-->
            </el-card>
          </template>
        </el-skeleton>
      </el-col>

      <el-col :span="6">
        <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
          <template #template>
            <el-card>
              <template #header>
                <div>
                  <el-skeleton-item variant="h3" style="width: 40%" />
                  <el-skeleton-item variant="rect" style="float: right; width: 1em; height: 1em" />
                </div>
              </template>

              <div class="flex-x-between">
                <el-skeleton-item variant="text" style="width: 30%" />
                <el-skeleton-item variant="circle" style="width: 2em; height: 2em" />
              </div>
              <div class="mt-5 flex-x-between">
                <el-skeleton-item variant="text" style="width: 50%" />
                <el-skeleton-item variant="text" style="width: 1em" />
              </div>
            </el-card>
          </template>
          <template v-if="!visitStatsLoading">
            <el-card shadow="never">
              <template #header>
                <div class="flex-x-between">
                  <span class="text-gray">农户数</span>
                  <!--<el-tag type="success" size="small">月</el-tag>-->
                </div>
              </template>

              <div class="flex-x-between mt-2">
                <div class="flex-y-center">
                  <span class="text-lg"></span>
                  <span class="text-lg">{{ farmerCount }}</span>
                  <!-- <span
                    :class="['text-xs', 'ml-2', getGrowthRateClass(visitStatsData.uvGrowthRate)]"
                  >
                    <el-icon>
                      <Top v-if="visitStatsData.uvGrowthRate > 0" />
                      <Bottom v-else-if="visitStatsData.uvGrowthRate < 0" />
                    </el-icon>
                    {{ formatGrowthRate(visitStatsData.uvGrowthRate) }}
                  </span> -->
                </div>
                <el-icon>
                  <User />
                </el-icon>

              </div>

              <!--              <div class="flex-x-between mt-2 text-sm text-gray">-->
              <!--                <span>总投保统计</span>-->
              <!--                <span>1974653</span>-->
              <!--                &lt;!&ndash; <span>{{ visitStatsData.totalUvCount }}</span> &ndash;&gt;-->
              <!--              </div>-->
            </el-card>
          </template>
        </el-skeleton>
      </el-col>

      <!-- 浏览量(PV) -->
      <el-col :span="6">
        <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
          <template #template>
            <el-card>
              <template #header>
                <div>
                  <el-skeleton-item variant="h3" style="width: 40%" />
                  <el-skeleton-item variant="rect" style="float: right; width: 1em; height: 1em" />
                </div>
              </template>

              <div class="flex-x-between">
                <el-skeleton-item variant="text" style="width: 30%" />
                <el-skeleton-item variant="circle" style="width: 2em; height: 2em" />
              </div>
              <div class="mt-5 flex-x-between">
                <el-skeleton-item variant="text" style="width: 50%" />
                <el-skeleton-item variant="text" style="width: 1em" />
              </div>
            </el-card>
          </template>
          <template v-if="!visitStatsLoading">
            <el-card shadow="never">
              <template #header>
                <div class="flex-x-between">
                  <span class="text-gray">公司数</span>
                </div>
              </template>

              <div class="flex-x-between mt-2">
                <div class="flex-y-center">
                  <span class="text-lg">{{ companyCount }}</span>
                  <!-- <span class="text-lg">{{ visitStatsData.todayPvCount }}</span>
                  <span
                    :class="['text-xs', 'ml-2', getGrowthRateClass(visitStatsData.pvGrowthRate)]"
                  >
                    <el-icon>
                      <Top v-if="visitStatsData.pvGrowthRate > 0" />
                      <Bottom v-else-if="visitStatsData.pvGrowthRate < 0" />
                    </el-icon>
                    {{ formatGrowthRate(visitStatsData.pvGrowthRate) }}
                  </span> -->
                </div>
                <el-icon>
                  <Avatar color="#409EFC" size="20" class="no-inherit" />
                </el-icon>
              </div>

              <!--              <div class="flex-x-between mt-2 text-sm text-gray">-->
              <!--                <span>总浏览量</span>-->
              <!--                <span>976655</span>-->
              <!--                &lt;!&ndash; <span>{{ visitStatsData.totalPvCount }}</span> &ndash;&gt;-->
              <!--              </div>-->
            </el-card>
          </template>
        </el-skeleton>
      </el-col>

      <!-- 浏览量(PV) -->
      <el-col :span="6">
        <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
          <template #template>
            <el-card>
              <template #header>
                <div>
                  <el-skeleton-item variant="h3" style="width: 40%" />
                  <el-skeleton-item variant="rect" style="float: right; width: 1em; height: 1em" />
                </div>
              </template>

              <div class="flex-x-between">
                <el-skeleton-item variant="text" style="width: 30%" />
                <el-skeleton-item variant="circle" style="width: 2em; height: 2em" />
              </div>
              <div class="mt-5 flex-x-between">
                <el-skeleton-item variant="text" style="width: 50%" />
                <el-skeleton-item variant="text" style="width: 1em" />
              </div>
            </el-card>
          </template>
          <template v-if="!visitStatsLoading">
            <el-card shadow="never">
              <template #header>
                <div class="flex-x-between">
                  <span class="text-gray">保单数</span>
                  <!--                  <el-tag type="primary" size="small">月</el-tag>-->
                </div>
              </template>

              <div class="flex-x-between mt-2">
                <div class="flex-y-center">
                  <span class="text-lg">{{ policyCount }}</span>
                  <!-- <span class="text-lg">{{ visitStatsData.todayPvCount }}</span>
                  <span
                    :class="['text-xs', 'ml-2', getGrowthRateClass(visitStatsData.pvGrowthRate)]"
                  >
                    <el-icon>
                      <Top v-if="visitStatsData.pvGrowthRate > 0" />
                      <Bottom v-else-if="visitStatsData.pvGrowthRate < 0" />
                    </el-icon>
                    {{ formatGrowthRate(visitStatsData.pvGrowthRate) }}
                  </span> -->
                </div>
                <el-icon>
                  <Operation color="#409EFC" size="20" class="no-inherit" />
                </el-icon>
              </div>

              <!--              <div class="flex-x-between mt-2 text-sm text-gray">-->
              <!--                <span>总浏览量</span>-->
              <!--                <span>976655</span>-->
              <!--                &lt;!&ndash; <span>{{ visitStatsData.totalPvCount }}</span> &ndash;&gt;-->
              <!--              </div>-->
            </el-card>
          </template>
        </el-skeleton>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mt-5">
      <el-col :xs="24" :span="24">
        <StackedLine id="StackedLine" width="100%" height="400px" />
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mt-5">
      <!-- 访问趋势统计图 -->
      <el-col :xs="24" :span="24">
        <VisitTrend id="VisitTrend2" width="100%" height="400px" />
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mt-5">
      <!-- 访问趋势统计图 -->
      <!-- <el-col :xs="24" :span="24">
        <baidumap id="baidumap" width="100%" height="800px" />
      </el-col> -->
    </el-row>
    <NoticeDetail ref="noticeDetailRef" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Dashboard',
  inheritAttrs: false
});


import { ref, onMounted } from 'vue';

import StackedLine from './components/StackedLine.vue';

import { getProductCount } from '../../api/Nyt7InsuranceProduct/Nyt7InsuranceProduct/index';
import { getFarmerCount } from '../../api/Nyt7FarmerInsuranceInfo/Nyt7FarmerInsuranceInfo/index';
import {  getInsuranceCompanyCount } from  '../../api/system/post/index';
import { getPolicyCount } from '@/api/Nyt7PolicyInsurance/Nyt7PolicyInsurance/index';

const productCount = ref(0);
const farmerCount = ref(0);
const companyCount = ref(0);
const policyCount = ref(0);

// 加载保险产品数量
const loadProductCount = async () => {
  try {
    const count = await getProductCount();
    productCount.value = count.data;
  } catch (error) {
    console.error('Failed to fetch product count:', error);
  }
};

// 加载农户数量
const loadFarmerCount = async () => {
  try {
    const count = await getFarmerCount();
    farmerCount.value = count.data;
  } catch (error) {
    console.error('Failed to fetch farmer count:', error);
  }
};

//加载保险公司数量
const loadCompanyCount = async () => {
  try {
    const count = await getInsuranceCompanyCount();
    companyCount.value = count.data;
    console.log('1',companyCount);
  } catch (error) {
    console.error('Failed to fetch company count:', error);
  }
};
//加载保单数量
const loadPolicyCount = async () => {
  try {
    const count = await getPolicyCount();
    policyCount.value = count.data;
  } catch (error) {
    console.error('Failed to fetch policy count:', error);
  }
};




// import router from "@/router";

// import StatsAPI, { VisitStatsVO } from "@/api/system/log";
// import NoticeAPI, { NoticePageVO } from "@/api/system/notice";

// import { useUserStore } from "@/store/modules/user";
// import { formatGrowthRate } from "@/utils";

const noticeDetailRef = ref();

// const notices = ref<NoticePageVO[]>([]);

// const userStore = useUserStore();
const date: Date = new Date();
const greetings = computed(() => {
  const hours = date.getHours();
  if (hours >= 6 && hours < 8) {
    return '晨起披衣出草堂，轩窗已自喜微凉🌅！';
  } else if (hours >= 8 && hours < 12) {
    return '上午好，' + '管理员' + '！';
  } else if (hours >= 12 && hours < 18) {
    return '下午好，' + '管理员' + '！';
  } else if (hours >= 18 && hours < 24) {
    return '晚上好，' + '管理员' + '！';
  } else {
    return '偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！';
  }
});
const visitStatsLoading = ref(true);
// const visitStatsData = ref<VisitStatsVO>({
//   todayUvCount: 0,
//   uvGrowthRate: 0,
//   totalUvCount: 0,
//   todayPvCount: 0,
//   pvGrowthRate: 0,
//   totalPvCount: 0,
// });

// 加载访问统计数据
const loadVisitStatsData = async () => {
  // StatsAPI.getVisitStats()
  //   .then((data) => {
  //     visitStatsData.value = data;
  //   })
  //   .finally(() => {
  visitStatsLoading.value = false;
  //   });
};

// 根据增长率获取样式
const getGrowthRateClass = (growthRate?: number): string => {
  if (!growthRate) {
    return 'color-[--el-color-info]';
  }

  if (growthRate > 0) {
    return 'color-[--el-color-danger]';
  } else if (growthRate < 0) {
    return 'color-[--el-color-success]';
  } else {
    return 'color-[--el-color-info]';
  }
};

const loadMyNotice = () => {
  // NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 10 }).then((data) => {
  //   notices.value = data.list;
  // });
};

// 查看更多
function handleViewMoreNotice() {
  // router.push({ path: "/myNotice" });
}

// 打开通知公告
function handleOpenNoticeDetail(id: string) {
  noticeDetailRef.value.openNotice(id);
}

// const productCount = ref(0);
// // 在加载数据时获取保险产品数量
// const loadProductCount = async () => {
//   try {
//     const count = await getProductCount();
//     productCount.value = count.data;
//   } catch (error) {
//     console.error('Failed to fetch product count:', error);
//   }
// };


onMounted(() => {
  loadVisitStatsData();
  loadMyNotice();
  loadProductCount(); // 添加这一行以加载保险产品数量
  loadFarmerCount();
  loadCompanyCount();
  loadPolicyCount();

});
</script>

<style lang="scss" scoped>
.dashboard-container {
  position: relative;
  padding: 24px;

  .github-corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: 0;
  }
}
</style>
